﻿@model IEnumerable<SpyApp.Models.Device>
<style>

    #list-device > ul.list-group > .header {
        background-color: #9C27B0;
        color: white;
    }

    #list-device > ul.list-group > li.list-group-item > .list-group-item-contain {
        background-color: #E1BEE7;
        color: black;
    }

        #list-device > ul.list-group > li.list-group-item > .list-group-item-contain:hover {
            color: #9C27B0;
        }

    #list-device > ul.list-group > li.active > .list-group-item-contain {
        font-weight: bold;
        border-left: 5px solid #9C27B0;
    }

</style>

<nav id="list-device">
    <ul class="list-group">
        <li class="list-group-item header">
            Devices
        </li>
        @if (Model == null)
        {
            <li class="list-group-item">
                @Html.ActionLink("No Device", "NoDevice", "Device")
            </li>
        }
        else
        {
            foreach (var device in Model)
            {
                if (device.Id == Request.QueryString["deviceid"]){                
                    @:<li class="list-group-item active">
                } else {
                    @:<li class="list-group-item">
                }
                        <img src="~/Images/phone-32.png" />
                        @Html.ActionLink(device.DeviceName, ViewContext.ParentActionViewContext.RouteData.Values["action"].ToString(),
                        ViewContext.ParentActionViewContext.RouteData.Values["controller"].ToString(),
                        new { deviceid = device.Id },
                        new { @class = "list-group-item-contain" })
                    @:</li>
            }
        }
    </ul>
</nav>
